<template>
  <div class="order-detail">
    <!-- 步骤条 -->
    <el-card>
      <el-steps v-if="Detail.last_status<50"
                :active="Detail.last_status/10"
                align-center>
        <el-step title="买家提交订单"
                 description="2020-03-03 22:10:34"
                 icon="el-icon-edit-outline" />
        <el-step title="买家支付待发货"
                 description="2020-03-03 22:10:34"
                 icon="el-icon-postcard" />
        <el-step title="商品已发货"
                 description="2020-03-03 22:10:34"
                 icon="el-icon-truck" />
        <el-step title="买家已确认收货"
                 description="2020-03-03 22:10:34"
                 icon="el-icon-s-check" />
        <el-step title="订单完成"
                 description="2020-03-03 22:10:34"
                 icon="el-icon-check" />
      </el-steps>

      <!-- 订单失败 -->
      <div class="font-bold text-black"
           v-if="Detail.last_status==50">交易失败</div>
      <!-- 订单取消 -->
      <div class="font-bold text-black"
           v-if="Detail.last_status==60">订单取消</div>
    </el-card>

    <!-- 买家提交订单 -->
    <First v-if="Detail.last_status==0"
           class="step-item"
           :Data="Detail" />
    <!-- 买家买家支付 -->
    <Second v-if="Detail.last_status==10"
            class="step-item"
            :Data="Detail"
            @refresh="fetchDetail()" />
    <!-- 商品已发货 -->
    <Third v-if="Detail.last_status==20"
           class="step-item"
           :Data="Detail" />
    <!-- 买家已确认收货 -->
    <Four v-if="Detail.last_status==30"
          class="step-item"
          :Data="Detail" />
    <!-- 订单完成 -->
    <Five v-if="Detail.last_status==40"
          class="step-item"
          :Data="Detail" />
    <!-- 订单失败-->
    <Failed v-if="Detail.last_status==50"
            class="step-item"
            :Data="Detail" />
    <!-- 订单取消 -->
    <Cancle v-if="Detail.last_status==60"
            class="step-item"
            :Data="Detail" />

  </div>
</template>

<script>
import First from './First'
import Second from './Second'
import Third from './Third'
import Four from './Four'
import Five from './Five'
import Failed from './Failed'
import Cancle from './Cancle'
import {getOrderDetail} from '@/api/order'
export default {
  name: 'OrderDetail',
  components: {
    First,
    Second,
    Third,
    Four,
    Five,
    Failed,
    Cancle,
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      tempRoute: {},
      Detail: {},
    }
  },
  created() {
    if (this.isEdit) {
      this.fetchDetail()
    }

    this.tempRoute = Object.assign({}, this.$route)
  },
  methods: {
    fetchDetail() {
      const id = this.$route.params && this.$route.params.id
      getOrderDetail(id)
        .then(res => {
          this.Detail = res.data

          this.setTagsViewTitle()
          this.setPageTitle()
        })
        .catch(err => {
          console.log(err)
        })
    },
    setTagsViewTitle() {
      const title = '编辑订单'
      const route = Object.assign({}, this.tempRoute, {title: `${title}-${this.Detail.id}`})
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    setPageTitle() {
      const title = '编辑订单'
      document.title = `${title} - ${this.Detail.id}`
    },

    submitForm() {
      console.log(this.postForm)
      this.$refs.postForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$notify({
            title: '成功',
            message: '发布文章成功',
            type: 'success',
            duration: 2000,
          })
          this.postForm.status = 'published'
          this.loading = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    draftForm() {
      if (this.postForm.content.length === 0 || this.postForm.title.length === 0) {
        this.$message({
          message: '请填写必要的标题和内容',
          type: 'warning',
        })
        return
      }
      this.$message({
        message: '保存成功',
        type: 'success',
        showClose: true,
        duration: 1000,
      })
      this.postForm.status = 'draft'
    },
    getRemoteUserList(query) {
      searchUser(query).then(response => {
        if (!response.data.items) return
        this.userListOptions = response.data.items.map(v => v.name)
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
.order-detail {
  .step-item {
  }
}
</style>
